<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开封菜单</title>
    <!-- 引入 layui.css -->
    <link href="../jquery/layui-main/layui-main/src/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="../jquery/layui-main/layui-main/dist/layui.js"></script>
    <script src="vivo.js"></script>
    <script src="../jquery/jquery3.6.js"></script>

    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
    <link rel="icon" href="/aaaa/favicon.ico">    <!--统一URL-->
    <script src="../URLJS/URL.js"></script>
</head>
<style>
    #txt{
        background: linear-gradient(to right, #7e2f2b,
        #146420)no-repeat right bottom;
        background-size: 0 2px;
        transition: background-size 0s;
    }
    #txt:hover{
        background-position: left bottom;
        background-size: 100% 2px ;
    }

    .layui-anim{animation-duration: 1.5s; -webkit-animation-duration: 1.5s;}
    .layui-anim{
        font-size: 300%;
    }
</style>
<body>
<div class="layui-anim" id="example-anim-element" style="padding: 16px 0;">
    <div class="layui-panel">
    <div style="padding: 32px;"><span id="txt">疯狂星期四</span></div>
</div>
</div>
<button class="layui-btn layui-btn-primary" id="example-anim-usage">下个菜</button>
</body>
<script>
    layui.use(function(){
        var $ = layui.$;
        var elem = $('#example-anim-element');
        var animName = 'layui-anim-rotate'; // 动画类名

        // 通过事件简单演示动画过程
        $('#example-anim-usage').on('click', function(){
            elem.removeClass(animName);
            setTimeout(function(){
                elem.addClass(animName);
                initText();
            });
        });
    });
</script>
</html>